/**
 * 屈向前
 * Created by quxiangqian on 2018/6/5.
 */
export  class Dialog extends React.Component {

    state={
        isShow:false
    }

    constructor(props){
        super(props);
        if(this.props.bind){
            this.props.bind.t=this;
        }
        this.rect=React.createRef();
    }

    /**
     * 显示
     */
    show=()=>{
      this.setState({isShow:true})

    }

    toCenter=()=>{

        if(this.state.isShow){
            var _left=($(window).width()-$(this.refs.rect).outerWidth())/2;
            var _top=($(window).height()-$(this.refs.rect).outerHeight())/2;
            this.refs.rect.style.left= (window.outerWidth-this.refs.rect.outerWidth)/2+"px";
            this.refs.rect.style.top= (window.outerHeight-this.refs.rect.outerHeight)/2+"px";
            $(this.refs.rect).css({left:_left,top:_top})
            console.log("tocenger")
        }

    }

    /**
     * 隐藏
     */
    hide=()=>{
        this.props.show=false;
        this.setState({isShow:false})
    }
    /**
     * 销毁
     */
    destory=()=>{

    }



    componentDidMount(){
        this.toCenter();
    }
    componentDidUpdate(){

        this.toCenter();

    }

    headerMouseDown=(e)=>{
        this.hide();
    }

    render(){

        if(this.props.show){
            this.state.isShow=true;
        }

        let layers= document.getElementById("layers")
        return (
            this.state.isShow? ReactDOM.createPortal(
                <div className="dialog">
                     <div className="model"></div>
                     <div className="rect" ref="rect">
                         <div className="head"><h5>{this.props.title}</h5><button id="close" onMouseDown={this.headerMouseDown}><span aria-hidden="true">&times;</span></button></div>
                         <div className="body">
                             {this.props.children}
                         </div>
                     </div>
                </div>
                , layers)
            :""
        )
    }
}